<template>
  <div class="page-container">
    <header-nav/>
    <media :query="{maxWidth: 768}">
        <div class="m">
            <div class="m-search" v-if="isQuery">
                <input class="m-search-input" type="number" maxlength="11" placeholder="门票查询入口" v-model="phoneValue">
                <div class="m-search-btn" @click="queryTicket">
                    <van-icon name="search" />
                    <span>查询</span>
                </div>
            </div>
            <swiper class="m-box" :options="swiperOption">
                <swiperSlide v-for="item in orderLists" :key="item.ID">
                    <div class="m-box-card">
                        <div class="m-box-card-top">
                            <div class="top-title">
                                <p>{{item.TicketName}}</p>
                                <p>{{item.Name}}({{item.Phone}})</p>
                            </div>
                            <div class="top-main">
                                <p class="main-type">{{item.UserType}}</p>
                                <div class="main-QR">
                                    <img :src="'https://es.11cm.com.cn/qr?url='+item.Number">
                                </div>
                                <p class="main-code">{{item.Number}}</p>
                                <a class="main-btn" :href="'https://es.11cm.com.cn/Register/UpdateImage?st='+ST+'&number='+item.Number">
                                    <span class="btn-icon" />
                                    <span>人脸采集</span>
                                </a>
                            </div>
                            <p class="top-row" v-if="activitysLists.Sponsor">
                                <van-icon name="edit" />
                                <span>主办方:</span>
                                <span>{{activitysLists.Sponsor}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Organizer">
                                <van-icon name="edit" />
                                <span>承办方:</span>
                                <span>{{activitysLists.Organizer}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Operational">
                                <van-icon name="contact" />
                                <span>执行单位:</span>
                                <span>{{activitysLists.Operational}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Contact">
                                <van-icon name="contact" />
                                <span>联系人:</span>
                                <span>{{activitysLists.Contact}}</span>
                                <a class="row-tips" :href="'tel:'+activitysLists.Phone">联系Ta &gt;</a>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.Hotel">
                                <span>入住酒店:</span>
                                <span>{{item.Hotel}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.RoomType">
                                <span>房间类型:</span>
                                <span>{{item.RoomType}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.CheckInDate">
                                <span>入住日期:</span>
                                <span>{{item.CheckInDate}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.CheckOutDate">
                                <span>退房日期:</span>
                                <span>{{item.CheckOutDate}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsShareRoom&&item.ShareRoomName">
                                <span>拼房人姓名:</span>
                                <span>{{item.ShareRoomName}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsShareRoom&&ShareRoomNamePhone">
                                <span>拼房人手机号:</span>
                                <span>{{item.ShareRoomNamePhone}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsMeetingSeatNumber&&item.MeetingSeatArea">
                                <span>会议座位号:</span>
                                <span>{{item.MeetingSeatArea}}</span>
                            </p>
                            <p class="top-row" v-if="ST=='hzz0914'||ST=='test'&&item.ParallelSessions">
                                <span>参加的论坛:</span>
                                <span>{{item.ParallelSessions}}</span>
                            </p>
                            <p class="top-row" v-else-if="item.ParallelSessions">
                                <span>分会场:</span>
                                <span>{{item.ParallelSessions}}</span>
                            </p>
                            <div class="top-more">
                                <span>更多</span>
                            </div>
                            <span class="top-status-0" v-if="item.TicketStateEnum==6" />
                            <span class="top-status-1" v-if="item.TicketStateEnum==5" />
                            <span class="top-status-2" v-if="item.TicketStateEnum==0" />
                            <!-- <span class="top-status-3" v-if="item.TicketState=='已使用'" /> -->
                            <!-- <span class="top-status-4" v-if="item.TicketState=='已取消'" /> -->
                        </div>
                        <div class="m-box-card-btm">
                            <div class="btm-rahmen">
                                <img :src="activitysLists.HeadLogo">
                            </div>
                            <div class="btm-info">
                                <p class="info-theme">{{activitysLists.Theme}}</p>
                                <p class="info-site">
                                    <van-icon name="location" />
                                    <span>{{activitysLists.Adress}}</span>
                                </p>
                                <p class="info-date">
                                    <van-icon name="clock" />
                                    <span>{{activitysLists.ThemeTime}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </swiperSlide>
                <div class="swiper-pagination" slot="pagination" />
            </swiper>
            <div class="m-tips">
                <p>温馨提示:</p>
                <p class="m-tips-text">1.请截图保存电子票,活动现场需要向主办方出示.</p>
                <p class="m-tips-copyright">-技术支持:智慧展务-</p>
            </div>
        </div>
    </media>
    <media :query="{minWidth: 768}">
        <div class="m">
            <div class="m-search" v-if="isQuery">
                <div>
                    <span>门票查询入口 :</span>
                </div>
                <div class="m-search-rg">
                    <input class="m-search-input" type="number" maxlength="11" placeholder="请输入手机号" v-model="phoneValue">
                    <div class="m-search-btn" @click="queryTicket">
                        <van-icon name="search" />
                        <span>查询</span>
                    </div>
                </div>
            </div>
            <div class="m-ticket">
                <div class="m-ticket-rahmen">
                    <img :src="activitysLists.HeadLogo">
                </div>
                <div class="m-ticket-info">
                    <p class="m-ticket-info-theme">{{activitysLists.Theme}}</p>
                    <p class="m-ticket-info-site">
                        <van-icon name="location" />
                        <span>{{activitysLists.Adress}}</span>
                    </p>
                    <p class="m-ticket-info-date">
                        <van-icon name="clock" />
                        <span>{{activitysLists.ThemeTime}}</span>
                    </p>
                    <p class="m-ticket-info-text" v-if="activitysLists.ActivityIntroduction">
                        <span>简介:{{activitysLists.ActivityIntroduction}}</span>
                    </p>
                </div>
                <span class="m-ticket-status-0" v-if="activitysLists.DateNow<=activitysLists.StartTime">未开始</span>
                <span class="m-ticket-status-1" v-if="activitysLists.DateNow>activitysLists.StartTime&&activitysLists.DateNow<activitysLists.EndTime">活动中</span>
                <span class="m-ticket-status-2" v-if="activitysLists.DateNow>=activitysLists.EndTime">已结束</span>
                <div class="m-ticket-link" @click="openQRWindow">
                    <span class="m-ticket-link-text">移动端入口:</span>
                    <van-icon class="m-ticket-link-qr" name="qr" />
                </div>
                <div class="m-ticket-qr" v-show="isShowQR">
                    <div id="qrcode" />
                    <p>请扫描二维码</p>
                </div>
            </div>
            <div class="m-box">
                <div v-for="item in orderLists" :key="item.ID">
                    <div class="m-box-card">
                        <div class="m-box-card-top">
                            <div class="top-title">
                                <p>{{item.TicketName}}</p>
                                <p>{{item.Name}}({{item.Phone}})</p>
                            </div>
                            <div class="top-main">
                                <p class="main-type">{{item.UserType}}</p>
                                <div class="main-QR">
                                    <img :src="'https://es.11cm.com.cn/qr?url='+item.Number">
                                </div>
                                <p class="main-code">{{item.Number}}</p>
                                <a class="main-btn" :href="'https://es.11cm.com.cn/Register/UpdateImage?st='+ST+'&number='+item.Number">
                                    <span class="btn-icon" />
                                    <span>人脸采集</span>
                                </a>
                            </div>
                            <p class="top-row" v-if="activitysLists.Sponsor">
                                <van-icon name="edit" />
                                <span>主办方:</span>
                                <span>{{activitysLists.Sponsor}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Organizer">
                                <van-icon name="edit" />
                                <span>承办方:</span>
                                <span>{{activitysLists.Organizer}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Operational">
                                <van-icon name="contact" />
                                <span>执行单位:</span>
                                <span>{{activitysLists.Operational}}</span>
                            </p>
                            <p class="top-row" v-if="activitysLists.Contact">
                                <van-icon name="contact" />
                                <span>联系人:</span>
                                <span>{{activitysLists.Contact}}</span>
                                <a class="row-tips" :href="'tel:'+activitysLists.Phone">联系Ta &gt;</a>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.Hotel">
                                <span>入住酒店:</span>
                                <span>{{item.Hotel}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.RoomType">
                                <span>房间类型:</span>
                                <span>{{item.RoomType}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.CheckInDate">
                                <span>入住日期:</span>
                                <span>{{item.CheckInDate}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsBookRoom||item.IsShareRoom&&item.CheckOutDate">
                                <span>退房日期:</span>
                                <span>{{item.CheckOutDate}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsShareRoom&&item.ShareRoomName">
                                <span>拼房人姓名:</span>
                                <span>{{item.ShareRoomName}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsShareRoom&&ShareRoomNamePhone">
                                <span>拼房人手机号:</span>
                                <span>{{item.ShareRoomNamePhone}}</span>
                            </p>
                            <p class="top-row" v-if="item.IsMeetingSeatNumber&&item.MeetingSeatArea">
                                <span>会议座位号:</span>
                                <span>{{item.MeetingSeatArea}}</span>
                            </p>
                            <p class="top-row" v-if="ST=='hzz0914'||ST=='test'&&item.ParallelSessions">
                                <span>参加的论坛:</span>
                                <span>{{item.ParallelSessions}}</span>
                            </p>
                            <p class="top-row" v-else-if="item.ParallelSessions">
                                <span>分会场:</span>
                                <span>{{item.ParallelSessions}}</span>
                            </p>
                            <span class="top-status-0" v-if="item.TicketStateEnum==6" />
                            <span class="top-status-1" v-if="item.TicketStateEnum==5" />
                            <span class="top-status-2" v-if="item.TicketStateEnum==0" />
                            <!-- <span class="top-status-3" v-if="item.TicketState=='已使用'" /> -->
                            <!-- <span class="top-status-4" v-if="item.TicketState=='已取消'" /> -->
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination" slot="pagination" />
            </div>
            <div class="m-tips">
                <p>温馨提示:</p>
                <p class="m-tips-text">1.请截图保存电子票,活动现场需要向主办方出示.</p>
                <p class="m-tips-copyright">-技术支持:智慧展务-</p>
            </div>
        </div>
    </media>
    <media :query="{minWidth: 768}">
      <footer-nav/>
    </media>
  </div>
</template>

<script>
import $ from 'jquery';
import Moment from 'moment';
import Media from "vue-media";
import wx from 'weixin-js-sdk';
import QRcode from 'qrcodejs2';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import Header from "../components/header";
import Footer from "../components/footer";
export default {
    name: "TicketPage",
    data() {
        const self = this;
        return {
            swiperOption: {
                direction: 'horizontal',
                loop: true,
                speed: 1500,
                autoplay: 1500,
                autoplayDisableOnInteraction: false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                on: {
                    slideChange: function () {
                        var num = this.activeIndex + 1;
                        const len = self.orderLists.length;
                        document.title = '电子票 (' + num + '/' + len + ')';
                    }
                }
            },
            ST: null,
            userPhone: null,
            weixinID: null,
            phoneValue: null,
            orderLists: [],
            activitysLists: [],
            isQuery: false,
            isShowQR: false,
        };
    },
    components: {
        "header-nav": Header,
        "footer-nav": Footer,
        Media,
        swiper,
        swiperSlide
    },
    created() {
        var url = location.hash;
        var indexOf = url.indexOf("?");
        var theRequest = new Object();
        const DateNow = Moment().format('YYYY-MM-DD HH:mm');
        if (indexOf != -1) {
            var strs = url.substring(indexOf + 1).split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        this.userPhone = theRequest.phone || '';
        this.weixinID = theRequest.weixinID || '';
        this.isQuery = theRequest.isQuery == 'true' ? true : false;
        if (this.$route.query.st) {
            this.$store.commit('SET_ST', this.$route.query.st);
            localStorage.setItem('st', this.$route.query.st);
        }
        this.ST = theRequest.st || this.$route.query.st || this.$store.state.UserInfo.ST;
        $.ajax({
            type: 'POST',
            url: this.baseUrl + '/api/Ticket/Query',
            data: {
                Openid: this.weixinID,
                Phone: this.userPhone,
                ST: this.ST,
            },
            success: (res) => {
                console.log('GetUserTickets', res);
                res.AttendUsers.forEach(item => {
                    item.CheckInDate = Moment(item.CheckInDate).format('YYYY-MM-DD HH:mm');
                    item.CheckOutDate = Moment(item.CheckOutDate).format('YYYY-MM-DD HH:mm');
                })
                var len = res.AttendUsers.length;
                if (len != 0) document.title = '电子票 (1/' + len + ')';
                res.CreditsDomain.DateNow = DateNow;
                this.orderLists = res.AttendUsers;
                this.activitysLists = res.CreditsDomain;
            }
        });
        $.ajax({
            type: 'POST',
            url: this.baseUrl + '/api/Activity/GetWeixinShare',
            data: {
                ST: this.ST,
                UserType:
                this.$route.query.userType || this.$store.state.UserInfo.UserTypeEnum,
                URL: window.location.href.split('#')[0]
            },
            success: (res) => {
                console.log('GetWeixinShare', res);
                this.wxShare(res);
            }
        });
    },
    mounted() {
        this.$nextTick(function () {
            if (document.body.clientHeight > 768) {
                new QRcode('qrcode', {
                    width: 96,
                    height: 96,
                    text: location.href,
                    colorDark: '#000000',
                    colorLight: '#ffffff'
                });
            }
        })
    },
    methods: {
        queryTicket() {
            var reg = /^1[345678]\d{9}$/;
            const DateNow = Moment().format('YYYY-MM-DD HH:mm');
            if (reg.test(this.phoneValue)) {
                if (this.phoneValue == this.userPhone) return
                $.ajax({
                    type: 'POST',
                    url: this.baseUrl + '/api/Ticket/Query',
                    data: {
                        Phone: this.phoneValue,
                        ST: this.ST,
                    },
                    success: (res) => {
                        console.log('GetUserTickets', res);
                        const len = res.AttendUsers.length;
                        if (len != 0) document.title = '电子票 (1/' + len + ')';
                        res.CreditsDomain.DateNow = DateNow;
                        this.userPhone = this.phoneValue;
                        this.orderLists = res.AttendUsers;
                        this.activitysLists = res.CreditsDomain;
                    }
                });
            } else {
                this.$toast('输入的手机号码有误');
            }
        },
        openQRWindow() {
            this.isShowQR = !this.isShowQR;
        }
    }
};
</script>

<style>
@import "../assets/css/swiper.min.css";
</style>

<style scoped>
@import "../assets/css/Tk.css";
</style>
